import React from 'react';
import { Card, Tabs, Progress, Empty } from 'antd';
import styles from './index.less';
import BudgetAddModal from '../BudgetAddModal';
import { budget } from '@/services/Organization';

const config = {
  optional: true,
  height: 50,
  width: 50,
  autoFit: false,
  color: ['#5B8FF9', '#E8EDF3'],
  showTitle: false,
  innerRadius: 0.7,
};

class BudgetItem extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { info } = this.props
    return (
      <div className={styles.itemContainer}>
        <div className={styles.title}>{info.code}</div>
        <div className={styles.info}>
          <div className={styles.item}>
            <div className={styles.subtitle}>所属预算</div>
            <div>{info.parentBudgetName || '--'}</div>
          </div>
          <div className={styles.item}>
            <div className={styles.subtitle}>总金额</div>
            <div>￥{info.amount || '--'}</div>
          </div>
          <div className={styles.item}>
            <div className={styles.subtitle}>利用率</div>
            <div>{info.useRate}%</div>
          </div>
          <div className={styles.item}>
            <Progress type="circle" width={60} strokeWidth={10} percent={info.useRate} />
          </div>
        </div>
      </div>
    );
  }
}


class Budget extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      list: []
    };
  }

  /* 监听父级数据变化 */
  static getDerivedStateFromProps(props, state) {
    const id = props.id;
    const preId = state.id;
    return id !== preId ? { id } : null;
  }

  componentDidUpdate(prevProps) {
    const id = this.state.id;
    prevProps.id !== id && id ? this.getBudgetList(id) : null;
  }

  /* 获取列表数据 */
  getBudgetList = async (id) => {
    try {
      this.setState({ isLoading: true });
      const res = await budget(id);
      this.setState({ list: res });
    } catch (error) {
      console.log(error)
    } finally {
      this.setState({ isLoading: false })
    }
  }
  render() {
    const { isLoading, list, id } = this.state;
    return (
      <Card
        title="预算一览"
        loading={isLoading}
        extra={<BudgetAddModal id={id} />}>
        {
          list.length === 0
            ?
            <div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
            :
            <Tabs defaultActiveKey="1" tabBarGutter="40" className={styles.tabsContainer}>
              {list.map((i) => (
                <Tabs.TabPane tab={<BudgetItem info={i} />} key={i.id} disabled={i === 10}></Tabs.TabPane>
              ))}
            </Tabs>
        }

      </Card>
    );
  }
}
export default Budget;
